<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>在线代码运行</title>
    <link href="https://cdn.jsdelivr.net/npm/monaco-editor/min/vs/editor/editor.main.css" rel="stylesheet">
    <style>
        :root {
            --primary-color: #007bff;
            --hover-color: #0056b3;
            --bg-dark: #1e1e1e;
            --text-light: #ffffff;
            --border-radius: 6px;
        }

        body { 
            margin: 0; 
            padding: 20px; 
            font-family: "Microsoft YaHei", Arial, sans-serif;
            background-color: #f5f5f5;
        }

        .header {
            margin-bottom: 20px;
            padding: 10px 0;
            border-bottom: 2px solid var(--primary-color);
        }

        .header h1 {
            margin: 0;
            color: var(--primary-color);
            font-size: 24px;
        }

        .container { 
            display: flex; 
            gap: 20px; 
            height: calc(100vh - 100px);
        }

        .editor-container, .output-container { 
            flex: 1;
            background: white;
            border-radius: var(--border-radius);
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
            padding: 15px;
        }

        .editor-container {
            display: flex;
            flex-direction: column;
        }

        #editor {
            flex: 1;
            border-radius: var(--border-radius);
            overflow: hidden;
        }

        .output-container {
            display: flex;
            flex-direction: column;
        }

        #output {
            flex: 1;
            background: var(--bg-dark);
            color: var(--text-light);
            padding: 15px;
            font-family: Consolas, Monaco, monospace;
            overflow: auto;
            white-space: pre-wrap;
            word-wrap: break-word;
            border-radius: var(--border-radius);
            font-size: 14px;
            line-height: 1.5;
        }

        .controls {
            padding: 10px 0;
            display: flex;
            gap: 10px;
            align-items: center;
            margin-bottom: 15px;
        }

        select { 
            padding: 8px 12px;
            font-family: inherit;
            border: 1px solid #ddd;
            border-radius: var(--border-radius);
            background-color: white;
            min-width: 120px;
            cursor: pointer;
        }

        select:focus {
            outline: none;
            border-color: var(--primary-color);
        }

        button { 
            padding: 8px 20px;
            font-family: inherit;
            cursor: pointer;
            background: var(--primary-color);
            color: var(--text-light);
            border: none;
            border-radius: var(--border-radius);
            font-weight: 500;
            transition: background-color 0.2s;
        }

        button:hover {
            background: var(--hover-color);
        }

        .panel-title {
            margin: 0 0 15px 0;
            color: #333;
            font-size: 18px;
            font-weight: 500;
        }

        /* 添加响应式设计 */
        @media (max-width: 768px) {
            .container {
                flex-direction: column;
                height: auto;
            }
            
            .editor-container, .output-container {
                min-height: 400px;
            }
        }
    </style>
</head>
<body>
    <div class="header">
        <h1>在线代码运行</h1>
    </div>
    <div class="container">
        <div class="editor-container">
            <div class="controls">
                <select id="language">
                    <option value="java">Java</option>
                    <option value="c">C</option>
                    <option value="cpp">C++</option>
                    <option value="go">Go</option>
                    <option value="python">Python</option>
                </select>
                <button onclick="runCode()">运行代码</button>
            </div>
            <div id="editor"></div>
        </div>
        <div class="output-container">
            <h3 class="panel-title">运行结果</h3>
            <div id="output"></div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/monaco-editor/min/vs/loader.js"></script>
    <script>
        require.config({ paths: { vs: 'https://cdn.jsdelivr.net/npm/monaco-editor/min/vs' }});
        require(['vs/editor/editor.main'], function() {
            // 配置Java代码提示
            monaco.languages.registerCompletionItemProvider('java', {
                provideCompletionItems: function(model, position) {
                    const suggestions = [
                        {
                            label: 'public class',
                            kind: monaco.languages.CompletionItemKind.Snippet,
                            insertText: [
                                'public class ${1:Solution} {',
                                '\tpublic static void main(String[] args) {',
                                '\t\t$0',
                                '\t}',
                                '}'
                            ].join('\n'),
                            insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet,
                            documentation: '创建一个带有main方法的公共类'
                        },
                        {
                            label: 'sout',
                            kind: monaco.languages.CompletionItemKind.Snippet,
                            insertText: 'System.out.println($0);',
                            insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet,
                            documentation: '打印输出'
                        },
                        {
                            label: 'psvm',
                            kind: monaco.languages.CompletionItemKind.Snippet,
                            insertText: [
                                'public static void main(String[] args) {',
                                '\t$0',
                                '}'
                            ].join('\n'),
                            insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet,
                            documentation: '创建main方法'
                        }
                    ];

                    // 常用Java类的提示
                    const javaClasses = [
                        'String', 'Integer', 'List', 'ArrayList', 'Map', 'HashMap',
                        'Set', 'HashSet', 'Arrays', 'Collections', 'Scanner'
                    ];

                    javaClasses.forEach(className => {
                        suggestions.push({
                            label: className,
                            kind: monaco.languages.CompletionItemKind.Class,
                            insertText: className,
                            documentation: `Java ${className} 类`
                        });
                    });

                    return { suggestions: suggestions };
                }
            });

            window.editor = monaco.editor.create(document.getElementById('editor'), {
                value: [
                    'public class Solution {',
                    '    public static void main(String[] args) {',
                    '        System.out.println("Hello, World!");',
                    '    }',
                    '}'
                ].join('\n'),
                language: 'java',
                theme: 'vs-dark',
                minimap: { enabled: false },
                fontSize: 14,
                tabSize: 4,
                automaticLayout: true,
                scrollBeyondLastLine: false,
                snippetSuggestions: 'top'
            });
            
            // 语言切换时更新编辑器
            document.getElementById('language').addEventListener('change', function(e) {
                monaco.editor.setModelLanguage(editor.getModel(), e.target.value);
                // 根据语言设置默认代码模板
                switch(e.target.value) {
                    case 'java':
                        editor.setValue([
                            'public class Solution {',
                            '    public static void main(String[] args) {',
                            '        System.out.println("Hello, World!");',
                            '    }',
                            '}'
                        ].join('\n'));
                        break;
                        
                    case 'c':
                        editor.setValue([
                            '#include <stdio.h>',
                            '',
                            'int main() {',
                            '    printf("Hello, World!\\n");',
                            '    return 0;',
                            '}'
                        ].join('\n'));
                        break;
                        
                    case 'cpp':
                        editor.setValue([
                            '#include <iostream>',
                            'using namespace std;',
                            '',
                            'int main() {',
                            '    cout << "Hello, World!" << endl;',
                            '    return 0;',
                            '}'
                        ].join('\n'));
                        break;
                        
                    case 'go':
                        editor.setValue([
                            'package main',
                            '',
                            'import "fmt"',
                            '',
                            'func main() {',
                            '    fmt.Println("Hello, World!")',
                            '}'
                        ].join('\n'));
                        break;
                        
                    case 'python':
                        editor.setValue([
                            '# Python Hello World',
                            'def main():',
                            '    print("Hello, World!")',
                            '',
                            'if __name__ == "__main__":',
                            '    main()'
                        ].join('\n'));
                        break;
                }
            });
        });

        async function runCode() {
            const output = document.getElementById('output');
            const language = document.getElementById('language').value;
            const code = editor.getValue();

            output.textContent = '运行中...\n';
            
            try {
                const response = await fetch('/api/code/run', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({
                        language: language,
                        code: code
                    })
                });

                const result = await response.json();
                if (result.success) {
                    output.textContent = result.output || '(无输出)';
                } else {
                    output.textContent = '错误: ' + result.error;
                }
            } catch (error) {
                output.textContent = '系统错误: ' + error.message;
            }
        }
    </script>
</body>
</html> 